<div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
  <%= render 'shared/settings_nav' %>
  <div class="flex-grow max-w-xl mx-auto">
    <h1 class="text-4xl font-bold mb-4">Email SMTP</h1>
    <% value = @encrypted_config.value || {} %>
    <%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
      <%= f.fields_for :value do |ff| %>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="form-control">
            <%= ff.label :host, class: 'label' %>
            <%= ff.text_field :host, value: value['host'], required: true, class: 'base-input' %>
          </div>
          <div class="form-control">
            <%= ff.label :port, class: 'label' %>
            <%= ff.text_field :port, value: value['port'], required: true, class: 'base-input' %>
          </div>
        </div>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="form-control">
            <%= ff.label :username, class: 'label' %>
            <%= ff.text_field :username, value: value['username'], class: 'base-input' %>
          </div>
          <div class="form-control">
            <%= ff.label :password, class: 'label' %>
            <%= ff.password_field :password, value: value['password'], class: 'base-input' %>
          </div>
        </div>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="form-control">
            <%= ff.label :domain, 'Domain (optional)', class: 'label' %>
            <%= ff.text_field :domain, value: value['domain'], class: 'base-input' %>
          </div>
          <div class="form-control">
            <%= ff.label :authentication, class: 'label' %>
            <%= ff.select :authentication, options_for_select([%w[Plain plain], %w[Login login], %w[CRAM-MD5 cram_md5]], value.fetch('authentication', 'plain')), { prompt: true }, required: true, class: 'base-select' %>
          </div>
        </div>
        <div class="form-control">
          <%= ff.label :security_label, 'SMTP Security', class: 'label' %>
          <div class="flex items-center space-x-6">
            <% [%w[Auto none], %w[SSL ssl], %w[TLS tls]].each do |(label, val)| %>
              <%= ff.label :security, value: val, for: "#{val}_radio", class: 'label' do %>
                <%= ff.radio_button :security, val, checked: (value['security'].blank? && val == 'none') || value['security'] == val, id: "#{val}_radio", class: 'base-radio mr-2' %>
                <%= label %>
              <% end %>
            <% end %>
          </div>
        </div>
        <div class="form-control">
          <%= ff.label :from_email, 'Send from Email', class: 'label' %>
          <%= ff.email_field :from_email, value: value['from_email'], required: true, class: 'base-input' %>
        </div>
      <% end %>
      <div class="form-control pt-2">
        <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button' %>
      </div>
    <% end %>
  </div>
  <div class="w-0 md:w-52"></div>
</div>
